
<template>
  <div class="dashboard-container">
    <el-drawer ref="drawer" size="1100px" title="订单详情" :visible.sync="showDialog" :wrapper-closable="true" @close="close">
      <div class="detial">
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm">
          <el-tabs v-model="activeName">
            <el-tab-pane label="包裹基本信息" name="first" />
          </el-tabs>
          <el-row :gutter="10">
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="系统编号:" prop="tid">
                <el-input v-model="ruleForm.tid" disabled placeholder="请输入系统编号" />
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="单据状态:" prop="status">
                <el-select
                  v-model="ruleForm.status"
                  disabled
                  style="width:100%"
                  placeholder="请选择单据状态"
                >
                  <el-option
                    label="待取号"
                    :value="102"
                  />
                  <el-option
                    label="已取号"
                    :value="103"
                  />
                  <el-option
                    label="已发货"
                    :value="104"
                  />
                  <el-option
                    label="已废弃"
                    :value="201"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="用户:" prop="user">
                <el-input v-if="ruleForm.user" v-model="ruleForm.user.username" disabled placeholder="请输入用户" />
                <el-input v-else disabled placeholder="暂无" />
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="客户:" prop="client_id">
                <el-select
                  v-model="ruleForm.client_id"
                  :disabled="status == 1"
                  filterable
                  style="width:100%"
                  placeholder="请选择客户"
                  @change="changeClient()"
                >
                  <el-option
                    v-for="(item,index) in clientList"
                    :key="index"
                    :label="item.username"
                    :value="item.id"
                  />
                </el-select>

                <!-- <el-input v-if="ruleForm.client" v-model="ruleForm.client.username" disabled placeholder="请输入客户" />
                <el-input v-else disabled placeholder="暂无" /> -->

              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="客户唛头:" prop="user_mark">
                <el-input v-model="ruleForm.user_mark" :disabled="status == 1" placeholder="请输入客户唛头" />
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="转运线路:" prop="line_id">
                <el-select
                  v-model="ruleForm.line_id"
                  :disabled="status == 1"
                  style="width:100%"
                  placeholder="请选择转运线路"
                  @change="changeLine()"
                >
                  <el-option
                    v-for="(item,index) in linesList"
                    :key="index"
                    :label="item.line_name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="制单渠道:" prop="channel_id">
                <el-select
                  v-model="ruleForm.channel_id"
                  :disabled="status == 1"
                  style="width:100%"
                  placeholder="请选择制单渠道"
                  @change="changeSize"
                >
                  <el-option
                    v-for="(item,index) in ChannelList"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="来源单号:" prop="order_no">
                <el-input v-model="ruleForm.order_no" :disabled="status == 1" placeholder="请输入来源单号" />
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="批次号:" prop="batch_no">
                <el-input v-model="ruleForm.batch_no" disabled placeholder="请输入批次号" />
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="创建时间:" prop="created">
                <el-input v-model="ruleForm.created" disabled placeholder="创建时间" />
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="发货时间:" prop="consign_time">
                <el-input v-model="ruleForm.consign_time" disabled placeholder="发货时间" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="备注:" prop="remarks">
                <el-input v-model="ruleForm.remarks" :disabled="status == 1" type="textarea" placeholder="备注" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-tabs v-model="activeName">
            <el-tab-pane label="发运信息" name="first" />
          </el-tabs>

          <el-row :gutter="10">
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="主运单号:" prop="first_waybill_no">
                <el-input v-model="ruleForm.first_waybill_no" disabled placeholder="主运单号" />
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="从运单号:" prop="second_waybill_no">
                <el-input v-model="ruleForm.second_waybill_no" disabled placeholder="从运单号" />
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="货物类型:" prop="goods_type_id">
                <el-select
                  v-model="ruleForm.goods_type_id"
                  :disabled="status == 1 && !ismother"
                  style="width:100%"
                  placeholder="请选择货物类型"
                  clearable
                >
                  <el-option
                    v-for="(item,index) in goodsTypeList"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="大小件:" prop="size">
                <el-select
                  v-model="ruleForm.size"
                  :disabled="status == 1"
                  style="width:100%"
                  placeholder="大小件"
                  clearable
                >
                  <el-option
                    label="小件"
                    :value="1"
                  />
                  <el-option
                    label="大件"
                    :value="2"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <!-- <el-form-item label="订单类型:" prop="order_type">
                <el-select
                  v-model="ruleForm.order_type"
                  :disabled="status == 1 && !ismother"
                  style="width:100%"
                  placeholder="订单类型"
                  clearable
                >
                  <el-option
                    label="仓储订单"
                    :value="1"
                  />
                  <el-option
                    label="非仓储订单"
                    :value="2"
                  />
                </el-select>
              </el-form-item> -->
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="走件口岸:" prop="port">
                <el-select
                  v-model="ruleForm.port.code"
                  :disabled="status == 1 && !ismother"
                  style="width:100%"
                  placeholder="请选择走件口岸"
                  clearable
                >
                  <el-option
                    v-for="(item,index) in PortList"
                    :key="index"
                    :label="item.port_name"
                    :value="item.code"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <!-- <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="送货方式:" prop="delivery_method">
                <el-select
                  v-model="ruleForm.delivery_method"
                  :disabled="status == 1 && !ismother"
                  style="width:100%"
                  clearable
                  placeholder="送货方式"
                >
                  <el-option
                    label="上门取件"
                    :value="1"
                  />
                  <el-option
                    label="自送货物"
                    :value="2"
                  />
                </el-select>
              </el-form-item>
            </el-col> -->
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="快递产品类型:" prop="express_type">
                <el-select
                  v-model="ruleForm.express_type"
                  :disabled="status == 1 && !ismother"
                  style="width:100%"
                  placeholder="快递产品类型"
                  clearable
                >
                  <el-option
                    label="标快"
                    :value="1"
                  />
                  <el-option
                    label="特快"
                    :value="2"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-tabs v-model="activeName">
            <el-tab-pane label="费用信息" name="first" />
          </el-tabs>
          <el-row :gutter="10">
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="运费:" prop="transport_cost">
                <el-input v-model="ruleForm.transport_cost" disabled placeholder="运费" />
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="其他费用:" prop="other_cost">
                <el-input v-model="ruleForm.other_cost" disabled placeholder="其他费用" />
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="实际重量(kg):" prop="other_cost">
                <el-input v-model="ruleForm.weight" disabled placeholder="实际重量" />
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="揽收重量(kg):" prop="other_cost">
                <el-input v-model="ruleForm.weight_pickup" disabled placeholder="实际重量" />
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="发运重量(kg):" prop="other_cost">
                <el-input v-model="ruleForm.weight_send" :disabled="status == 1" placeholder="发运重量" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-tabs v-model="activeName">
            <el-tab-pane label="收发件人信息" name="first" />
          </el-tabs>
          <el-row :gutter="10">
            <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
              <el-card shadow="never">
                <div class="send-reciver">
                  <div class="title">寄件人
                    <span v-if="status != 1 && !last779" style="cursor:pointer;font-size:14px;margin-left:100px" @click="senderAddressDialog = true">选择地址</span>
                  </div>
                  <div v-if="ruleForm.sender" class="send-detial">
                    <div class="reciver-list">
                      <el-form-item label="寄件人姓名:" prop="sender.name">
                        <el-input
                          v-model="ruleForm.sender.name"
                          :disabled="status == 1 || last779"
                          style="width: 330px"
                          placeholder="请填写寄件人姓名"
                        />
                      </el-form-item>
                    </div>
                    <div class="reciver-list" style="width: 450px">
                      <el-form-item label="区号:" prop="sender.area_code">
                        <el-select
                          v-model="ruleForm.sender.area_code"
                          :disabled="status == 1 || last779"
                          style="width: 330px"
                          placeholder="请选择区号"
                        >
                          <el-option
                            v-for="item in AreaCodeList"
                            :key="item.area_code"
                            :label="'+' + item.area_code + ' ' + item.area_name"
                            :value="item.area_code"
                          />
                        </el-select>
                      </el-form-item>
                    </div>
                    <div class="reciver-list">
                      <el-form-item label="手机:" prop="sender.mobile">
                        <el-input
                          v-model="ruleForm.sender.mobile"
                          :disabled="status == 1 || last779"
                          style="width: 330px"
                          placeholder="请填写手机"
                        />
                      </el-form-item>
                    </div>
                    <div class="reciver-list">
                      <el-form-item label="邮编:" prop="sender.name">
                        <el-input
                          v-model="ruleForm.sender.postcode"
                          :disabled="status == 1 || last779"
                          style="width: 330px"
                          placeholder="请填写邮编"
                        />
                      </el-form-item>
                    </div>
                    <div class="reciver-list">
                      <el-form-item label="区域:" prop="sendAddress">
                        <div style="display: flex;width: 330px">
                          <el-input
                            v-model="ruleForm.sender.nation"
                            :disabled="status == 1 || last779"
                            style="margin-right: 10px"
                            placeholder="请填写国家"
                          />
                          <el-input
                            v-model="ruleForm.sender.province"
                            :disabled="status == 1 || last779"
                            style="margin-right: 10px"
                            placeholder="请填写省"
                          />
                          <el-input
                            v-model="ruleForm.sender.city"
                            :disabled="status == 1 || last779"
                            style="margin-right: 10px"
                            placeholder="请填写市"
                          />
                          <el-input
                            v-model="ruleForm.sender.district"
                            :disabled="status == 1 || last779"
                            placeholder="请填写区"
                          />
                        </div>
                      </el-form-item>
                    </div>
                    <div class="reciver-list">
                      <el-form-item label="地址:" prop="sender.name">
                        <el-input
                          v-model="ruleForm.sender.detailed"
                          :disabled="status == 1 || last779"
                          style="width: 330px"
                          placeholder="请填写地址"
                          :autosize="{ minRows: 2, maxRows: 4 }"
                          type="textarea"
                        />
                      </el-form-item>
                    </div>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
              <el-card shadow="never">
                <div class="send-reciver">
                  <div class="title">
                    收件人
                    <span v-if="ruleForm.client_id && status != 1 && !last779" style="cursor:pointer;font-size:14px;margin-left:100px" @click="addressDialogVisible = true">选择地址</span>
                  </div>
                  <div class="send-detial">
                    <div class="reciver-list">
                      <el-form-item label="智能识别:">
                        <div class="ailist">
                          <el-input
                            v-model="AIaddress"
                            :disabled="status == 1 || last779"
                            style="width: 264px;margin-right:10px"
                            placeholder="请填写要识别的信息"
                          />
                          <el-button v-if="status != 1 && !last779" type="primary" @click="aisearch()">查询</el-button>
                        </div>

                      </el-form-item>
                    </div>
                    <div class="reciver-list">
                      <el-form-item label="收件人姓名:" prop="receiver.name">
                        <el-input
                          v-model="ruleForm.receiver.name"
                          :disabled="status == 1 || last779"
                          style="width: 330px"
                          placeholder="请填写收件人姓名"
                        />
                      </el-form-item>
                    </div>
                    <div class="reciver-list" style="width: 450px">
                      <el-form-item label="区号:" prop="receiver.area_code">
                        <el-select
                          v-model="ruleForm.receiver.area_code"
                          :disabled="status == 1 || last779"
                          style="width: 100%"
                          placeholder="请选择区号"
                        >
                          <el-option
                            v-for="item in AreaCodeList"
                            :key="item.area_code"
                            :label="'+' + item.area_code + ' ' + item.area_name"
                            :value="item.area_code"
                          />
                        </el-select>
                      </el-form-item>
                      <el-form-item label="手机:" prop="receiver.mobile">
                        <el-input
                          v-model="ruleForm.receiver.mobile"
                          :disabled="status == 1 || last779"
                          placeholder="请填写手机"
                        />
                      </el-form-item>
                    </div>
                    <div class="reciver-list">
                      <el-form-item label="邮编:" prop="receiver.postcode">
                        <el-input
                          v-model="ruleForm.receiver.postcode"
                          :disabled="status == 1 || last779"
                          style="width: 330px"
                          placeholder="请填写邮编"
                        />
                      </el-form-item>
                    </div>
                    <div class="reciver-list">
                      <el-form-item label="选择区域:" prop="receiver.nation">
                        <el-cascader
                          v-if="showArea"
                          v-model="areaList"
                          :disabled="status == 1 || last779"
                          filterable
                          :props="codes"
                          placeholder="请选择区域"
                          :options="linkList"
                          style="width: 330px"
                          @change="changeArea()"
                        />
                      </el-form-item>
                    </div>
                    <div class="reciver-list">
                      <el-form-item label="地址:" prop="receiver.detailed">
                        <el-input
                          v-model="ruleForm.receiver.detailed"
                          :disabled="status == 1 || last779"
                          style="width: 330px"
                          placeholder="请填写地址"
                          :autosize="{ minRows: 2, maxRows: 4 }"
                          type="textarea"
                        />
                      </el-form-item>
                    </div>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
          <el-tabs v-model="activeName">
            <el-tab-pane label="商品详情" name="first" />
          </el-tabs>
          <el-button v-if="status == 2" style="margin-bottom: 10px" type="primary" @click="addGoods()">添加商品</el-button>
          <el-table :data="ruleForm.item" style="width: 100%" border>
            <el-table-column prop="name" label="商品类型" width="300">
              <template #default="{ row }">
                <div style="display: flex">
                  <el-cascader
                    v-model="row.cate1_arr"
                    :disabled="status == 1"
                    style="margin-right: 5px"
                    filterable
                    :props="goodsCodes"
                    placeholder="请选择商品分类"
                    :options="goodsTypeTree"
                    @change="changeType(row)"
                  />
                  <el-select v-model="row.cate2_id" :disabled="status == 1" placeholder="商品类目" @change="changeCate(row)">
                    <el-option v-for="(item, index) in row.goodsLists" :key="index" :label="item.name" :value="item.id" />
                  </el-select>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="title" label="商品名称">
              <template #default="{ row }">
                <el-input v-model="row.title" :disabled="status == 1" placeholder="根据类目回显也可以自由编辑" />
              </template>
            </el-table-column>
            <el-table-column width="120" prop="amount" label="申报价值(KRW)">
              <template #default="{ row }">
                <el-input v-model="row.amount" :disabled="status == 1" placeholder="申报价值(KRW)" />
              </template>
            </el-table-column>
            <el-table-column width="120" prop="num" label="数量">
              <template #default="{ row }">
                <el-input v-model="row.num" :disabled="status == 1" placeholder="数量" />
              </template>
            </el-table-column>
            <el-table-column width="120" prop="address" label="小计(KRW)">
              <template #default="{ row }">
                {{ (row.num * row.amount).toFixed(2) }}
              </template>
            </el-table-column>
            <el-table-column v-if="status == 2" label="操作" prop="addtime" width="100">
              <template #default="{ $index }">
                <el-button v-if="ruleForm.item.length > 1" type="primary" @click="delet($index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="total">
            <div style="margin-right: 50px">
              商品数量: <span>{{ totalNum }}</span>
            </div>
            <div>
              商品金额合计: <span>{{ totalAmount }}</span>
            </div>
          </div>
        </el-form>
      </div>
      <div class="buttons">
        <el-button
          v-if="status == 2 || ismother"
          size="mini"
          type="primary"
          style="margin-left:20px"
          @click="editNews()"
        >
          保 存
        </el-button>
        <el-button
          size="mini"
          type=""
          @click="close()"
        >
          取消
        </el-button>
      </div>
    </el-drawer>
    <el-dialog
      title="选择收件地址"
      :visible.sync="addressDialogVisible"
      width="800px"
      :before-close="handleClose"
    >
      <div style="padding:20px">
        <el-table
          ref="multipleTable"
          :data="clientAddressList"
          style="width: 100%;"
          size="mini"
          border
          tooltip-effect="dark"
          :header-cell-style="{ background: '#eaf1fd', color: '#333' }"
        >
          <el-table-column
            label="收件人"
            width="120px"
            fixed
          >
            <template slot-scope="{ row }">
              <div>
                <span>{{ row.name }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="电话"
            width="150px"
          >
            <template slot-scope="{ row }">
              <div>
                <span>+{{ row.area_code }} {{ row.mobile }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="邮编"
            width="80px"
          >
            <template slot-scope="{ row }">
              <div>
                <span>{{ row.postcode }} </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="地址"
            width="300px"
          >
            <template slot-scope="{ row }">
              <div>
                <span>{{ row.nation }} {{ row.province }}{{ row.city }}{{ row.district }}{{ row.detailed }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="是否默认"
            width="80px"
          >
            <template slot-scope="{ row }">
              <div>
                <span v-if="row.is_default == 1" style="color:blue">是</span>
                <span v-else>否</span>

              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="80px"
            fixed="right"
          >
            <template slot-scope="{ row }">
              <div>

                <el-button type="primary" @click="changeAddress(row)">选 择</el-button>

              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addressDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="选择寄件地址"
      :visible.sync="senderAddressDialog"
      width="800px"
      :before-close="handleClose"
    >
      <div style="padding:20px">
        <el-table
          ref="multipleTable"
          :data="senderAddressList"
          style="width: 100%;"
          size="mini"
          border
          tooltip-effect="dark"
          :header-cell-style="{ background: '#eaf1fd', color: '#333' }"
        >
          <el-table-column
            label="寄件人"
            width="120px"
            fixed
          >
            <template slot-scope="{ row }">
              <div>
                <span>{{ row.name }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="电话"
            width="150px"
          >
            <template slot-scope="{ row }">
              <div>
                <span>+{{ row.area_code }} {{ row.mobile }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="邮编"
            width="80px"
          >
            <template slot-scope="{ row }">
              <div>
                <span>{{ row.postcode }} </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="地址"
            width="300px"
          >
            <template slot-scope="{ row }">
              <div>
                <span>{{ row.nation }} {{ row.province }}{{ row.city }}{{ row.district }}{{ row.detailed }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="是否默认"
            width="80px"
          >
            <template slot-scope="{ row }">
              <div>
                <span v-if="row.is_shipments == 1" style="color:blue">是</span>
                <span v-else>否</span>

              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="80px"
            fixed="right"
          >
            <template slot-scope="{ row }">
              <div>

                <el-button type="primary" @click="changeAddressSender(row)">选 择</el-button>

              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="senderAddressDialog = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { orderUpdate, AddressCorrect } from '@/api/order/index'
import { listCourierNo } from '@/api/base/express'
import { listLineNo } from '@/api/base/lines'
import { listType, goodsList, goodsListCate } from '@/api/base/goods'
import { listChannel } from '@/api/vocational/irrigation'
import { listPort } from '@/api/base/port'
import { mapState } from 'vuex'
import { countryAddressInfo } from '@/api/base/country'
import { listMobileAreaCode } from '@/api/user'
import { listClient, listClientAddress } from '@/api/connection'
import { listSystemSender } from '@/api/system'

import _ from 'lodash'

export default {
  name: 'Detial',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    ismother: {
      type: Boolean,
      default: false
    },
    detial: {
      require: false,
      type: Object,
      default: () => {

      }
    },
    status: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      AIaddress: '',
      activeName: 'first',
      linesList: [],
      time: '',
      showDialog: false,
      expressList: [],
      goodsTypeList: [],
      ChannelList: [],
      PortList: [],
      areaList: [],
      AreaCodeList: [],
      goodsTypeTree: [],
      clientList: [],
      clientAddressList: [],
      senderAddressList: [],
      addressDialogVisible: false,
      senderAddressDialog: false,
      codes: {
        label: 'name',
        value: 'name',
        children: '_child'
      },
      goodsCodes: {
        label: 'name',
        value: 'id',
        children: 'children'
      },
      ruleForm: {
        user: {},
        client: {},
        receiver: {},
        item: [],
        sender: {},
        port: {
          code: ''
        }
      },

      rules: {
        user_mark: [
          { required: true, message: '请输入客户唛头', trigger: 'blur' }
        ],
        client_id: [
          { required: true, message: '请选择客户', trigger: 'blur' }
        ],
        line_id: [
          { required: true, message: '请选择转运线路', trigger: 'blur' }
        ],
        channel_id: [
          { required: true, message: '请选择制单渠道', trigger: 'blur' }
        ],
        // order_no: [
        //   { required: true, message: '请输入来源单号', trigger: 'blur' }
        // ],
        // size: [
        //   { required: true, message: '请选择大小件', trigger: 'blur' }
        // ],
        // order_type: [
        //   { required: true, message: '请选择订单类型', trigger: 'blur' }
        // ],
        // port: [
        //   { required: true, message: '请选择走件口岸', trigger: 'blur' }
        // ],
        // delivery_method: [
        //   { required: true, message: '请选择送货方式', trigger: 'blur' }
        // ],
        // express_type: [
        //   { required: true, message: '请选择快递产品类型', trigger: 'blur' }
        // ],
        // goods_type_id: [
        //   { required: true, message: '请选择货物类型', trigger: 'blur' }
        // ],
        'receiver.name': [{ required: true, message: '请填写收件人姓名' }],
        'receiver.area_code': [{ required: true, message: '请选择区号' }],
        'receiver.mobile': [{ required: true, message: '请填写手机' }],
        'receiver.nation': [{ required: true, message: '请选择区域' }],
        // 'receiver.postcode': [{ required: true, message: '请填写邮编' }],
        'receiver.detailed': [{ required: true, message: '请填写地址' }]
      },
      showArea: false
    }
  },
  computed: {
    // ...mapState({
    //   linkList: state => state.app.linkList
    // }),
    linkList: {
      get() { return this.$store.state.app.linkList },
      set(value) { }
    },
    totalNum() {
      let num = 0
      this.ruleForm.item.forEach((row) => {
        num += Number(row.num)
      })
      return num
    },
    totalAmount() {
      let num = 0
      this.ruleForm.item.forEach((row) => {
        num += row.num * row.amount
      })
      return num.toFixed(2)
    },
    last779() {
      let is779 = false
      if (
        (this.ruleForm.first_waybill_no && this.ruleForm.first_waybill_no.indexOf('779') === 0) ||
		(this.ruleForm.first_waybill_no && this.ruleForm.second_waybill_no)
      ) {
        is779 = true
      } else {
        is779 = false
      }
      return is779
    },
    senderCode() {
      return '+' + this.ruleForm.sender.area_code + ' ' + this.ruleForm.sender.mobile
    },
    senderArea() {
      return this.ruleForm.sender.nation + ' ' + this.ruleForm.sender.province + this.ruleForm.sender.city + this.ruleForm.sender.district
    }
  },
  // 改变0为''

  watch: {
    async visible(val) {
      this.showDialog = this.visible
      if (!this.showDialog) {
        this.resetForm()
        this.showArea = false
      } else {
        this.AIaddress = ''
        this.areaList = []
        this.showArea = true
        this.detial.line_id = this.changeZero(this.detial.line_id)
        this.detial.channel_id = this.changeZero(this.detial.channel_id)
        this.detial.consign_time = this.changeZero(this.detial.consign_time)
        this.detial.goods_type_id = this.changeZero(this.detial.goods_type_id)
        this.detial.receiver.area_code = this.changeZero(this.detial.receiver.area_code)
        this.detial.size = this.changeZero(this.detial.size)
        this.detial.order_type = this.changeZero(this.detial.order_type)
        this.detial.port = this.changeZero(this.detial.port)
        this.detial.delivery_method = this.changeZero(this.detial.delivery_method)
        this.detial.express_type = this.changeZero(this.detial.express_type)
        if (!this.detial.port) {
          this.detial.port = {
            code: ''
          }
        }
        for (const index in this.detial.item) {
          if (this.detial.item[index].cate2_id === 0) this.detial.item[index].cate2_id = ''
          const item = this.detial.item[index]
          item.cate1_arr = item.cate1_ids.split(',').map(Number)
          const cateID = item.cate1_ids.split(',')[item.cate1_ids.split(',').length - 1]
          if (cateID) {
            await goodsList({
              cate: cateID,
              limit: 1000
            }).then((res) => {
              item.goodsLists = res.data.list
            })
          } else {
            item.goodsLists = []
          }
        }
        this.detial.user_mark = this.detial.receiver.user_mark
        this.ruleForm = _.cloneDeep(this.detial)
        // 获取客户列表
        this.getClientList(this.ruleForm.user.id)
        // 获取客户地址列表
        if (this.ruleForm.client_id) {
          this.getClientAddressList()
        }
        // 获取类型
        listType({
          limit: 1000,
          status: 1
        }).then(res => {
          this.goodsTypeList = res.data.list
        })
        this.areaList = [this.ruleForm.receiver.nation, this.ruleForm.receiver.province, this.ruleForm.receiver.city, this.ruleForm.receiver.district]
      }
    }
  },
  mounted() {
    // 线路列表
    this.getLines()
    // 渠道列表
    this.getlistChannel()
    // 快递公司
    this.getExpressCode()
    // 口岸
    this.getPortList()
    // 区号
    this.getListMobileAreaCode()
    // 区域
    this.getCountryAddressInfo()
    // 商品类型
    this.getGoodsCate()
    // 寄件地址列表
    this.getSenderAddress()
  },
  methods: {
    aisearch() {
      AddressCorrect({
        country: 'CN',
        address: this.AIaddress
      }).then((res) => {
        this.areaList = []
        this.areaList.push('中国', res.data.state, res.data.city, res.data.district)
        this.ruleForm.receiver.nation = '中国'
        this.ruleForm.receiver.province = res.data.state
        this.ruleForm.receiver.city = res.data.city
        this.ruleForm.receiver.district = res.data.district
        this.ruleForm.receiver.detailed = res.data.detail
        this.ruleForm.receiver.mobile = res.data.phone
        this.ruleForm.receiver.name = res.data.name
      })
    },
    changeZero(data) {
      if (data === 0) {
        return ''
      } else {
        return data
      }
    },
    getSenderAddress() {
      listSystemSender({
        page: 1,
        limit: 10000,
        status: 1
      }).then((res) => {
        this.senderAddressList = res.data.data
      })
    },
    // 选择地址
    changeAddress(row) {
      this.ruleForm.receiver = row
      this.areaList = []
      this.areaList = [this.ruleForm.receiver.nation, this.ruleForm.receiver.province, this.ruleForm.receiver.city, this.ruleForm.receiver.district]
      this.addressDialogVisible = false
    },
    changeAddressSender(row) {
      this.ruleForm.sender = row
      this.ruleForm.sender.sender_id = row.id
      this.senderAddressDialog = false
    },
    handleClose() {
      this.addressDialogVisible = false
      this.senderAddressDialog = false
    },
    // 改变客户
    changeClient() {
      if (this.ruleForm.client_id) {
        this.clientList.forEach(i => {
          if (this.ruleForm.client_id === i.id) {
            this.ruleForm.user_mark = i.user_mark
          }
        })
        // 获取客户地址列表
        listClientAddress({
          page: 1,
          limit: 10000,
          status: 1,
          cid: this.ruleForm.client_id
        }).then((res) => {
          this.clientAddressList = res.data.data
          if (this.clientAddressList.length) {
            this.ruleForm.receiver = this.clientAddressList.map(item => {
              if (item.is_default === 1) {
                return item
              }
            })[0]
            this.areaList = []
            this.areaList = [this.ruleForm.receiver.nation, this.ruleForm.receiver.province, this.ruleForm.receiver.city, this.ruleForm.receiver.district]
          }
        })
      }
    },
    // 进入弹框获取收件地址列表
    getClientAddressList() {
      listClientAddress({
        page: 1,
        limit: 10000,
        status: 1,
        cid: this.ruleForm.client_id
      }).then((res) => {
        this.clientAddressList = res.data.data
      })
    },
    // 客户列表
    getClientList(id) {
      listClient({
        page: 1,
        limit: 10000,
        status: 1,
        uid: id
      }).then((res) => {
        this.clientList = res.data.data
        this.clientList.unshift({
          username: '散客',
          id: 0
        })
      })
    },
    // 获取商品分类
    getGoodsCate() {
      goodsListCate({
        page: 1,
        limit: 1000
      }).then((res) => {
        this.goodsTypeTree = res.data.list
      })
    },

    getCountryAddressInfo() {
      if (!this.linkList.length) {
        countryAddressInfo().then(res => {
          this.linkList = res.data
          this.$store.dispatch('app/setLink', res.data)
        })
      }
    },
    getListMobileAreaCode() {
      listMobileAreaCode().then(res => {
        this.AreaCodeList = res.data.list
      })
    },
    getExpressCode() {
      listCourierNo({}).then(res => {
        this.expressList = res.data
      })
    },
    // 改变地址
    changeArea() {
      this.areaList.push('')
      this.ruleForm.receiver.nation = this.areaList[0]
      this.ruleForm.receiver.province = this.areaList[1]
      this.ruleForm.receiver.city = this.areaList[2]
      this.ruleForm.receiver.district = this.areaList[3]
    },
    // 添加商品
    addGoods() {
      this.ruleForm.item.push({
        cate1_arr: [],
        goodsLists: [],
        cate1_ids: '',
        cate2_id: '',
        name: '',
        title: '',
        amount: 0,
        num: 1
      })
    },
    delet(index) {
      this.ruleForm.item.splice(index, 1)
    },
    // 线路列表
    getLines() {
      listLineNo({
      }).then(res => {
        this.linesList = res.data
      })
    },
    changeSize(val) {
      let obj = {}
      obj = this.ChannelList.find(function(i) {
        return i.id === val
      })
      if (obj.size === 1 || obj.size === 2) {
        this.ruleForm.size = obj.size
      } else {
        this.ruleForm.size = ''
      }
      console.log(obj)
    },
    // 改变线路
    changeLine() {
      this.ruleForm.size = ''
      this.ruleForm.channel_id = ''
      this.ruleForm.goods_type_id = ''
      this.getlistChannel()
    },
    // 渠道列表
    getlistChannel() {
      listChannel({
        limit: 1000,
        status: 1,
        line_id: this.ruleForm.line_id
      }).then(res => {
        this.ChannelList = res.data.data
      })
    },
    // 口岸列表
    getPortList() {
      listPort({
        limit: 1000,
        status: 1
      }).then(res => {
        this.PortList = res.data.data
      })
    },
    // 切换分类1
    changeType(row) {
      row.cate2_id = ''
      row.cate1_ids = row.cate1_arr.toString()
      // 获取商品
      goodsList({
        cate: row.cate1_arr[row.cate1_arr.length - 1],
        limit: 1000
      }).then((res) => {
        row.goodsLists = res.data.list
      })
    },
    // 切换类型2
    changeCate(row) {
      row.goodsLists.forEach((i) => {
        if (row.cate2_id === i.id) {
          row.title = i.name
        }
      })
    },
    close() {
      this.$emit('update', false)
    },
    resetForm() {
      this.$refs['ruleForm'].resetFields()
      this.ruleForm = {
        user: {},
        client: {},
        receiver: {},
        item: [],
        sender: {},
        port: {
        }
      }
    },
    addNews() {

    },
    editNews() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          console.log(this.ruleForm)
          const detail = []
          this.ruleForm.item.forEach((i) => {
            const obj = {
              cate1_ids: i.cate1_ids,
              cate2_id: i.cate2_id,
              title: i.title,
              amount: i.amount,
              num: i.num
            }
            if (i.id) {
              obj.id = i.id
            }
            detail.push(obj)
          })
          const param = {
            tid: this.ruleForm.tid,
            order_no: this.ruleForm.order_no,
            line_id: this.ruleForm.line_id,
            channel_id: this.ruleForm.channel_id,
            goods_type_id: this.ruleForm.goods_type_id,
            size: this.ruleForm.size,
            order_type: this.ruleForm.order_type,
            port: this.ruleForm.port.code,
            sender_id: this.ruleForm.sender.sender_id,
            delivery_method: this.ruleForm.delivery_method,
            express_type: this.ruleForm.express_type,
            client_id: this.ruleForm.client_id,
            user_mark: this.ruleForm.user_mark,
            client_address_id: this.ruleForm.client_address_id,
            client_address: {
              name: this.ruleForm.receiver.name,
              area_code: this.ruleForm.receiver.area_code,
              mobile: this.ruleForm.receiver.mobile,
              postcode: this.ruleForm.receiver.postcode,
              nation: this.ruleForm.receiver.nation,
              province: this.ruleForm.receiver.province,
              city: this.ruleForm.receiver.city,
              district: this.ruleForm.receiver.district,
              detailed: this.ruleForm.receiver.detailed
            },
            sender: {
              name: this.ruleForm.sender.name,
              area_code: this.ruleForm.sender.area_code,
              mobile: this.ruleForm.sender.mobile,
              postcode: this.ruleForm.sender.postcode,
              nation: this.ruleForm.sender.nation,
              province: this.ruleForm.sender.province,
              city: this.ruleForm.sender.city,
              district: this.ruleForm.sender.district,
              detailed: this.ruleForm.sender.detailed
            },
            other_cost: this.ruleForm.other_cost,
            weight: this.ruleForm.weight,
            remarks: this.ruleForm.remarks,
            detail: detail
          }
          if (!this.ruleForm.label_data.is_pay) {
            param.weight_send = this.ruleForm.weight_send
          }
          orderUpdate(param).then(res => {
            this.$message.success('编辑成功')
            this.$emit('reload')
          })
        } else {
          return false
        }
      })
    }

  }

}
</script>
<style lang="scss" scoped>
.detial{
  padding:20px 40px 20px 20px;
  overflow: auto;
  height: calc(100vh - 80px);
}
.buttons{
  display: flex;
  flex-direction: row-reverse;
  padding-right: 40px;
}
.title {
	color: #1890ff;
	font-size: 15px;
	margin-bottom: 10px;
}

.reciver-list {
	display: flex;
}
.total {
	margin-top: 20px;
	display: flex;
	font-size: 14px;
	span {
		color: #1890ff;
		margin-left: 5px;
	}
}
.ailist{
  display: flex;
}
</style>
